<template>
    <div class="project-feature-container">
        <div class="campaignBadge">
            <div class="campaignBadge-title">Featured In</div>
            <div class="campaignBadge-content">
                <div class="feature-icon"></div>
                <a class="campaignBadge-text" target="_blank">{{campaign.category}}</a>
            </div>
        </div>

        <div class="campaignBadge-title pick-title">Select a Perk</div>

        <div class="project-peak-area">
            <el-row v-for="item in peaksList"
                    :key="item.id"
                    class="single-item">
                <el-col>
                    <el-card :body-style="{ padding: '16px' }" shadow="hover">
                        <!--<img src="~assets/film.png" class="image">-->
                        <div class="image-area" v-if="item.peakImage" :style="getBGImage(item.peakImage)">
                        </div>
                        <div class="peak-product">
                            <span>{{item.title}}</span>
                        </div>
                        <div class="peak-price">
                            <span class="price">${{item.price}}</span>
                            <span class="perk_currency">USD</span>
                            <span class="content"></span>
                        </div>

                        <div class="peak-date">
                            <span class="title">
                                {{item.description}}
                            </span>
                            <span class="content items" v-if="item.peakItems">
                                Included Items
                            </span>
                            <ul v-if="item.peakItems">
                                <li v-for="(text,index) in item.peakItems"
                                    :key="index"
                                    class="single-item">
                                    {{text}}
                                </li>
                            </ul>
                            <p style="font-weight: bold; margin-top: 16px;">Estimated Shipping</p>
                            <span class="date">
                                {{item.duration | dateFormat}}
                            </span>
                        </div>

                        <!--<div class="peak-people">
                            <b>{{item.peakNum}}</b>
                            claimed
                        </div>-->
                        <!--详情页面暂时不能选择peak-->
                        <!-- <div class="action-area">
                             <el-button type="primary" class="submit-button" @click="confirmHandler(item.id, item.price)">GET THIS PEAK</el-button>
                         </div>-->
                    </el-card>
                </el-col>
            </el-row>
        </div>


    </div>

</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import moment from 'moment'
    import {apiSaveUserPeak} from '@/api/user_peak'

    export default {
        name: "ProjectFeature",
        props: {
            campaign: {},
            peaksList: {},
            preview: {
                default: false
            }
        },
        data() {
            return {
                currentDate: new Date()
            }
        },
        computed: {
            ...mapState({
                'userId': state => state.user.userId,
            }),

        },
        methods: {
            getBGImage(image) {

                // var imagePath = Constants.ICON_HOST + this.userId
                var imagePath = image

                return `background-image: url('${imagePath}');background-size: 100% 100%;
                background-repeat: no-repeat;`

            },
            confirmHandler(peakId, price) {

                var that = this

                var queryData = {
                    userId: this.userId,
                    campaignId: this.campaign.id,
                    peakId: peakId,
                    price: price
                }

                this.$confirm('are you sure to get this peak?', 'Tips', {
                    confirmButtonText: 'yes',
                    cancelButtonText: 'no',
                    showClose: false,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    type: 'warning'
                }).then(() => {


                    apiSaveUserPeak(queryData).then((res) => {
                        console.log(res)

                        if (0 === res.code) {
                            // 如果查询成功
                            that.$message({
                                type: 'success',
                                message: 'success!'
                            });
                        }


                    }).catch((err) => {
                        console.log(err)
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: 'fail'
                    });
                });
            }
        },
        filters: {
            dateFormat(time) {
                // return moment(time).startOf('mimute').fromNow()
                return moment(time).format('MMMM Do YYYY')
            }
        },
    }
</script>

<style lang="scss">
    .project-feature-container {
        margin-top: 46px;
        margin-left: 26px;
        padding-right: 116px;
        .campaignBadge-title {
            font-family: "Benton Sans", "Helvetica", "sans-serif";
            font-size: 16px;
            font-weight: normal;
            letter-spacing: 0;
            color: #6a6a6a;
            padding-bottom: 6px;
            text-transform: uppercase;
            border-bottom: 2px solid #dddddd;
        }
        .campaignBadge {
            .campaignBadge-content {
                display: box;
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flexbox;
                display: -ms-flex;
                display: flex;
                box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                -moz-align-items: center;
                -ms-align-items: center;
                align-items: center;
                padding-right: 20px;
                margin-top: 16px;
                .feature-icon {
                    width: 40px;
                    height: 80px;
                    background-image: url('~assets/feature.png');
                    background-size: 100% 100%;
                }
                .campaignBadge-text {
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 26px;
                    letter-spacing: 0;
                    padding-left: 20px;
                    color: #E51075;
                }
            }
        }
        .pick-title {
            margin-top: 26px;
        }
        .project-peak-area {
            .single-item {
                padding: 16px 0px;
            }
            .image-area {
                width: 100%;
                height: 180px;
            }
            .peak-price {
                .price {
                    padding-right: 5px;
                    margin-bottom: 5px;
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 26px;
                }
                .perk_currency {
                    color: #6a6a6a;
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                }
                .content {
                    color: #6a6a6a;
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                }
            }
            .peak-product {
                font-family: "Benton Sans Medium";
                font-size: 18px;
                font-weight: normal;
                line-height: 28px;
                letter-spacing: 0;
            }
            .peak-date {
                span {
                    display: block;
                }
                .title {
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 14px;
                    line-height: 20px;
                }
                .content {
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-weight: bold;
                    font-size: 14px;
                    line-height: 20px;
                }
                .date {
                    font-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                }
                .single-item {
                    list-style-type: disc;
                    margin-left: 26px;
                }
                .items {
                    margin-top: 16px;
                }
            }
            .peak-people {
                font-size: 14px;
                color: #6a6a6a;
                margin-top: 10px;
            }
            .action-area {
                padding: 6px;
                text-align: center;
                span {
                    text-transform: uppercase;
                }
                .submit-button {
                    width: 100%;
                    margin: 16px 0px;
                }
            }

        }
    }
</style>